<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>停车信息</title>
    <link rel="stylesheet" href="__PUBLIC__/style/weui.css"/>
    <link rel="stylesheet" href="__PUBLIC__/style/example.css"/>
    <link rel="stylesheet" href="__PUBLIC__/style/swiper.min.css">
    <link rel="stylesheet" href="__PUBLIC__/style/sweetalert.css">
</head>
<body ontouchstart>
<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <!-- header -->
            <!--<div class="header home-header">-->
                <!--<a href="{:U('Park/MyCar')}" class="icon iconfont header-left">&#xe62c;</a>-->
                <!--<h1>停车信息</h1>-->
                <!--<a href="#" class="icon iconfont header-right">&#xe647;</a>-->
            <!--</div>-->
            <!-- header end-->
            <div class="weui-tab__panel">
                <div class="info-header">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="mark"></div>
                                <span></span>
                                <img src="__PUBLIC__/images/cart_pro.png">
                            </div>
                            <div class="swiper-slide">
                                <div class="mark"></div>
                                <span>{$bill['cardNo']|mb_substr=0,2,'utf-8'}  {$bill['cardNo']|mb_substr=2,5,'utf-8'}</span>
                                <img src="__PUBLIC__/images/cart_pro.png">
                            </div>
                            <div class="swiper-slide">
                                <div class="mark"></div>
                                <span></span>
                                <img src="__PUBLIC__/images/cart_pro.png">
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="weui-cells__title">入库时间：</div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" value="{$bill['startTime']|strtotime|date='Y年m月d日  H:i:s',###}" readonly>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">累计停车时长：</div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" id="showTime" value="" readonly>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">应付金额</div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" value="{$bill['totalFee']}" readonly>
                        </div>
                    </div>
                </div>
                <div class="weui-cells weui-cells_checkbox">
                    <label class="weui-cell weui-check__label" for="point">
                        <div class="weui-cell__hd">
                            <input type="radio" class="weui-check" id="point" name="payType" value="1" checked="checked"/>
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                            <p>微信支付</p>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="wx">
                        <div class="weui-cell__hd">
                            <input type="radio" class="weui-check" id="wx" name="payType" value="2"/>
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                            <p>积分支付</p>
                        </div>
                    </label>
                </div>
                <div class="weui-cells__tips">温馨提示：<br>车辆支付后，请在20分钟内离场，<br>超时将重新计费</div>
                <div class="weui-btn-area">
                    <button class="weui-btn weui-btn_primary" id="payDialog">去支付</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialogs">
    <!--BEGIN dialog1-->
    <div class="js_dialog" id="integralDialog" style="opacity: 0; display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" style="font-size: 22px;">本次需扣除积分：<span id="cutPoint"></span><br>当前积分：{$point}</div>
            <div class="weui-dialog__ft">
                <button class="weui-dialog__btn weui-btn" id="pointBtn">确认积分支付</button>
                <button class="weui-dialog__btn weui-btn">再想想</button>
            </div>
        </div>
    </div>
    <!--END dialog1-->

    <!--BEGIN dialog2-->
    <div class="js_dialog" id="payOkDialog" style="opacity: 0; display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">已成功支付费用</strong></div>
            <div class="weui-dialog__bd">请于20分钟内离场，<br>超时将重新计费</div>
            <div class="weui-dialog__ft">
                <button class="weui-dialog__btn weui-btn big_btn">我知道了</button>
            </div>
        </div>
    </div>
    <!--END dialog2-->
</div>
<script src="__PUBLIC__/js/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="__PUBLIC__/js/swiper.min.js"></script>
<script src="__PUBLIC__/js/sweetalert.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 2,
        initialSlide: 1,
        spaceBetween: 20,
        centeredSlides: true
    });

    $(function () {
        <php> if($bill['retcode'] == 9) { </php>
            $("#payOkDialog").fadeIn(200);
            setTimeout(function () {
                location.href = '/park/mycar';
            }, 2500);
        <php> } </php>
    });

    //弹窗
    $('#dialogs').on('click', '.weui-dialog__btn', function() {
        $(this).parents('.js_dialog').fadeOut(200);
    });
    //积分支付弹窗
    $('#payDialog').on('click', function() {
        var payType = $('input[name=payType]:checked').val();
        if (payType == 2) {
            $('#cutPoint').html("{$bill['dikou']}");
            $('#integralDialog').fadeIn(200);
        } else {
            location.href = "/park/wxpay?carNo=" + "{$bill['cardNo']}";
        }
    });

    $('#pointBtn').on('click', function() {
        $.post('{:U("park/pointpay")}', {carNo: "{$bill['cardNo']}"}, function (o) {
            if (o.code == 200) {
                $("#payOkDialog").fadeIn(200);
                setTimeout(function () {
                    location.href = '/park/mycar';
                }, 2500);
            }
            else {
                swal(o.message);
            }
        });
    });

    var ss = 0;
    var d = "{$bill['serviceTime']}"||0;
    function timed() {
        if (ss == 60) {
            location.reload();
        }
        var h = Math.floor(d / 3600) < 10 ? '0' + Math.floor(d / 3600) : Math.floor(d / 3600),
            m = Math.floor((d / 60 % 60)) < 10 ? '0' + Math.floor((d / 60 % 60)) : Math.floor((d / 60 % 60));
        //s = Math.floor((d % 60)) < 10 ? '0' + Math.floor((d % 60)) : Math.floor((d % 60));

        var str = '';
        str += h ? h + '小时 ' : '';
        str += m ? m + '分钟 ' : '';
        //str += s ? s + '秒' : '';
        $('#showTime').val(str);
        //5小时30分钟
        d++;
        ss++;
        setTimeout(timed, 1000); //在1秒后再次执行
    }
    window.onload = timed;
</script>
</body>
</html>
